<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>全托管卖家中心</title>
	<link rel="shortcut icon" href="./static/image/tts-favicon.png">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<link rel="stylesheet" type="text/css" href="./static/font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="./static/css/数据中心-经营分析.css">
</head>
<body>
	<div id="app" v-cloak>
		<m-layout>
			<div class="m-table-page">
                <div class="m-page-title">经营分析</div>
				<div class="m-page-card mb-15">
					<div class="flex items-center t-form-box">
						<span class="mr-10">日期</span>
						<el-date-picker
							style="width: 270px;margin-right: 10px;"
							v-model="form.aaa"
							size="medium"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="changeDate()">
						</el-date-picker>
						<span class="mr-10">对比</span>
						<el-date-picker
							style="width: 270px;margin-right: 30px;"
							v-model="form.bbb"
							size="medium"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="changeDate()">
						</el-date-picker>
						<div class="guojia" style="width:200px;margin-right: 10px;">
							<div class="label">国家</div>
							<el-select style="width: 100%;" size="medium" v-model="form.ccc" placeholder="请选择">
								<el-option label="全国" value="1"></el-option>
							</el-select>
						</div>
						<div class="flex-1 w-0">
							<el-input v-model="form.ddd" size="medium" placeholder="支持使用SPU，名称搜索商品"></el-input>
						</div>
					</div>
				</div>
				<div class="m-page-card mb-15">
					<div class="t1">销售趋势</div>
					<div class="card-box">
						<div v-for="(item, index) in xsqsData" :key="index" class="item" :class="{active: index == form.eee}">
							<div class="radio"></div>
							<div class="name">{{item.name}}<i class="iconfont icon-wenhao text-12 color-gray-400"></i></div>
							<div class="num">{{item.num}}</div>
							<div class="bottom">
								<div class="vs">
									<div class="label">VS</div>
									<div class="value">{{item.vs}}</div>
								</div>
								<div class="result" :class="{tb: item.result < 0}">
									<i class="iconfont icon-shang-copy-copy"></i>
									<span class="text">{{item.result}}%</span>
								</div>
							</div>
						</div>
					</div>
					<el-radio-group class="mt-15" v-model="form.fff">
						<el-radio label="1">总销量</el-radio>
						<el-radio label="2">按国家展示</el-radio>
						<el-radio label="3">按场域展示</el-radio>
					</el-radio-group>
					<m-charts :options="chartOption" height="300px"></m-charts>
				</div>
				<div class="m-page-card">
					<div class="t1">商品榜单</div>
					<el-table class="m-page-table" border :data="tableData">
						<el-table-column v-for="(item, index) in tableHead" :key="index" :sortable="item.sortable" :fixed="item.fixed" :align="item.align" :width="item.width">
							<template slot="header" slot-scope="scope">
								<span>{{item.label}}</span><i v-if="item.prop != 'spxx'" class="iconfont icon-wenhao ml-5 color-gray-400"></i>
							</template>
							<template slot-scope="scope">
								<div v-if="item.prop == 'spxx'" class="spxx-box">
									<div class="sort" :class="{one: scope.$index == 0}">{{scope.$index+1}}</div>
									<img :src="scope.row.spxx.img"/>
									<div class="info">
										<div class="name">{{scope.row.spxx.name}}<i class="el-icon-arrow-down"></i></div>
										<div class="spu">SUP：{{scope.row.spxx.spu}}</div>
									</div>
								</div>
								<div v-else class="flex justify-end">
									<div class="bhl">
										<div class="num">{{scope.row[item.prop].num}}</div>
										<div class="bfb" :class="{tb: scope.row[item.prop].bhl > 0 ? false : true}">
											<i class="iconfont icon-shang-copy-copy"></i>
											<span class="text">{{scope.row[item.prop].bhl}}%</span>
										</div>
									</div>
									<div v-if="item.prop == 'zxl'" class="chart-box ml-10">
										<m-charts :options="getTableOptions(scope.row[item.prop].chartData)" height="100%"></m-charts>
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.js"></script>
	<script src="./static/libs/echarts5.4.3.js"></script>
	<script src="./static/libs/dayjs.min.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./static/image/goods/title.js"></script>
	<script src="./config/数据中心-经营分析.js"></script>
	<script src="./static/components/common.js"></script>
	<script src="./static/js/数据中心-经营分析.js"></script>
</body>
</html>